<script setup lang="ts">
import CopyOutlined from "@ant-design/icons-vue/CopyOutlined";
import {message} from "ant-design-vue";

// 关键词优化 智能出价
import {WxtBiddingConstraintType, WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const props = defineProps({
  rows: {
    type: Array,
    default: () => []
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
});
const currRows = ref<any[]>([...props.rows]);
watch(() => props.rows, (v) => {
  currRows.value = v;
})
const emit = defineEmits([
  "refresh",
]);
const visible = ref(false);
const handle = () => {
  if (props.rows.length === 0) {
    message.error("请选择需要批量处理的数据！");
    return;
  }
  visible.value = true;
};
const columns = [
  {
    title: '单元名称',
    dataIndex: 'adgroupName',
    width: 250,
    dataType: 'custom',
    slot: 'adgroupName',
  },
  {
    title: '计划名称',
    dataIndex: 'campaignName',
  },
  // {
  //   title: '智能调价',
  //   dataIndex: 'isOpen',
  //   dataType: 'customRender',
  //   render: (text: any, record: any, index: any) => {
  //     record = props.rows.find((e: any) => e.adgroupId === record.adgroupId);
  //     if (record.campaignBidType === 'max_amount') {
  //       return '最大化拿量';
  //     } else {
  //       if (record.adgroupOcpc.enableOcpc) {
  //         return '开启';
  //       } else {
  //         return '关闭';
  //       }
  //     }
  //   }
  // },
  // {
  //   title: '优化目标',
  //   dataIndex: 'ocpcMarketingAim',
  //   dataType: 'customRender',
  //   render: (text: any, record: any, index: any) => {
  //     record = props.rows.find((e: any) => e.adgroupId === record.adgroupId);
  //     if (record.campaignBidType === 'max_amount') {
  //       return '-';
  //     } else {
  //       if (record.adgroupOcpc.ocpcMarketingAim) {
  //         switch (record.adgroupOcpc.ocpcMarketingAim) {
  //           case WxtBiddingConstraintType.收藏加购:
  //             return '收藏加购';
  //           case WxtBiddingConstraintType.宝贝点击:
  //             return '宝贝点击';
  //           case WxtBiddingConstraintType.促进成交:
  //             return '促进成交';
  //         }
  //       } else {
  //         return '未开启';
  //       }
  //     }
  //   }
  // },
  // {
  //   title: '溢价比例',
  //   dataIndex: 'ocpcRatio',
  //   dataType: 'customRender',
  //   render: (text: any, record: any, index: any) => {
  //     record = props.rows.find((e: any) => e.adgroupId === record.adgroupId);
  //     if (record.campaignBidType === 'max_amount') {
  //       return '-';
  //     } else {
  //       if (record.adgroupOcpc.ocpcRatio) {
  //         return record.adgroupOcpc.ocpcRatio + '%';
  //       } else {
  //         return '未开启';
  //       }
  //     }
  //   }
  // },
  {
    title: '设置智能调价',
    dataType: 'custom',
    slot: 'enableOcpc',
  },
  {
    title: '设置优化目标',
    dataType: 'custom',
    slot: 'ocpcMarketingAim',
  },
  {
    title: '设置溢价比例',
    dataType: 'custom',
    slot: 'ocpcRatio',
  },
];
const update = () => {
  const bidList = currRows.value.map((e) => ({
    adgroupId: e.adgroupId,
    campaignId: e.campaignId,
    ecpcOption: e.adgroupOcpc.ecpcOption,
    enableColdSpeedNewItem: e.adgroupOcpc.enableColdSpeedNewItem,
    enableOcpc: e.adgroupOcpc.enableOcpc,
    ocpcMarketingAim: e.adgroupOcpc.ocpcMarketingAim,
    ocpcRatio: e.adgroupOcpc.ocpcRatio,
    ocpcStatus: e.adgroupOcpc.ocpcStatus,
  }));
  WxtUtils.customRequest('https://one.alimama.com/adgroup/bid/batchUpdate.json', props.bizCode, {
    bidList,
  }).then(res => {
    if (res.data.info.ok !== true) {
      message.error(res.data.info.message)
      return;
    }
    message.success("操作成功！");
  }).finally(() => {
    visible.value = false;
    emit('refresh');
  })
}
const copy = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    message.success('复制成功')
  }).catch(() => {
    message.error('复制失败')
  });
}
const state = reactive({
  enableOcpc: false,
  ocpcMarketingAim: WxtBiddingConstraintType.促进成交,
  ocpcRatio: undefined,
});
</script>

<template>
  <div @click="handle" style="display: inline-block;">
    <slot>
      <a-button type="primary" size="small" ghost>智能出价</a-button>
    </slot>
  </div>
  <wxt-modal :width="900" :style="{
    top: 'revert-layer'
  }" title="批量修改智能出价" v-model:visible="visible"
  >
    <base-table :scroll="{
      y:500
    }" :columns="columns" :data-source="currRows"
    >
      <template #header>
        <div></div>
      </template>
      <template #adgroupName="row">
        <a-row type="flex" class="adgroupName" :gutter="5">
          <a-col>
            <a-popover placement="right">
              <template #content>
                <img :src="row.material.imageUrl"
                     style="width: 200px;height: 200px;"
                />
              </template>
              <img :src="row.material.imageUrl"
                   style="width: 60px;height: 60px;border-radius: 5px;"
              />
            </a-popover>
          </a-col>
          <a-col flex="1" class="title">
            <a-tooltip :title="row.adgroupName">
              <span style="
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;"
              >{{ row.adgroupName }}</span>
            </a-tooltip>
            <div>
              <a-space>
                <span style="color: #666;">ID: {{ row.adgroupId }}</span>
                <CopyOutlined style="color: #1677ff;cursor: pointer;font-size: 12px;" @click="copy(row.campaignId)"/>
              </a-space>
            </div>
          </a-col>
        </a-row>
      </template>
      <template #isOpen="row">

        <span v-if="row.campaignBidType=='max_amount'">最大化拿量</span>
        <span v-else-if="!row.adgroupOcpc.enableOcpc">未开启</span>
        <span v-else>开启</span>
        <!--        <span v-else>{{ row.adgroupOcpc.ocpcRatio }}%</span>-->
      </template>
      <template #enableOcpc="row">
        <a-switch  size="small" v-if="row.campaignBidType!='max_amount'" :checked="row.adgroupOcpc.enableOcpc"
                  @change="v=>{currRows.find((e)=>e.adgroupId==row.adgroupId).adgroupOcpc.enableOcpc=v}"
        />
        <span v-else>-</span>
      </template>
      <template #ocpcMarketingAim="row">
        <a-select placeholder="请选择"  size="small" v-if="row.campaignBidType!='max_amount'"
                  :disabled="!row.adgroupOcpc.enableOcpc || row.campaignBidType!='custom_bid'"
                  v-model:value="row.adgroupOcpc.ocpcMarketingAim"
                  @change="v=>{currRows.find((e)=>e.adgroupId==row.adgroupId).adgroupOcpc.ocpcMarketingAim=v}"
                  style="width: 100px;"
        >
          <a-select-option :value="WxtBiddingConstraintType.促进成交">促进成交</a-select-option>
          <a-select-option :value="WxtBiddingConstraintType.收藏加购">收藏加购</a-select-option>
          <a-select-option :value="WxtBiddingConstraintType.宝贝点击">宝贝点击</a-select-option>
        </a-select>
        <span v-else>-</span>
      </template>
      <template #ocpcRatio="row">
        <a-input-number  size="small" placeholder="请输入" v-if="row.campaignBidType!='max_amount'"
                        :disabled="!row.adgroupOcpc.enableOcpc || row.campaignBidType!='custom_bid'"
                        v-model:value="row.adgroupOcpc.ocpcRatio"
                        @change="v=>{currRows.find((e)=>e.adgroupId==row.adgroupId).adgroupOcpc.ocpcRatio=v}"
                        style="width: 100px;" min="0" max="100"
        >
          <template #addonAfter>%</template>
        </a-input-number>
        <span v-else>-</span>
      </template>
    </base-table>
    <a-divider/>
    <a-row>
      <a-col>
        <a-space>
          智能调价:
          <a-switch v-model:checked="state.enableOcpc"/>
          <a-button type="primary" size="small" @click="()=>{
            currRows.forEach((e)=>{
              if (e.campaignBidType!='max_amount'){
                e.adgroupOcpc.enableOcpc=state.enableOcpc;
              }
            })
          }">应用</a-button>

          优化目标:
          <a-select v-model:value="state.ocpcMarketingAim" size="small">
            <a-select-option :value="WxtBiddingConstraintType.促进成交">促进成交</a-select-option>
            <a-select-option :value="WxtBiddingConstraintType.收藏加购">收藏加购</a-select-option>
            <a-select-option :value="WxtBiddingConstraintType.宝贝点击">宝贝点击</a-select-option>
          </a-select>
          <a-button type="primary" size="small" @click="()=>{
            currRows.forEach((e)=>{
              if (e.campaignBidType!='max_amount'){
                e.adgroupOcpc.ocpcMarketingAim=state.ocpcMarketingAim;
              }
            })
          }">应用</a-button>
          溢价比例:
          <a-input-number v-model:value="state.ocpcRatio" size="small" placeholder="请输入" style="width: 100px;" min="0" max="100">
            <template #addonAfter>%</template>
          </a-input-number>
          <a-button type="primary" size="small" @click="()=>{
            currRows.forEach((e)=>{
              if (e.campaignBidType!='max_amount'){
                e.adgroupOcpc.ocpcRatio=state.ocpcRatio;
              }
            })
          }">应用</a-button>
        </a-space>
      </a-col>
      <a-col flex="1">

      </a-col>
      <a-space>
        <a-button @click="visible=false" size="small">取消</a-button>
        <a-button type="primary" @click="update" size="small">确定</a-button>
      </a-space>
    </a-row>
  </wxt-modal>
</template>

<style scoped>

</style>
